<template>
    <div class="full-screen-container min-h-screen bg-gray-100 flex items-center justify-center p-4">
        <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="flex flex-col md:flex-row">
                <!-- 左侧步骤说明 -->
                <div class="w-full md:w-1/2 p-10 bg-white-50">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">忘记密码</h2>
                    <p class="text-gray-600 mb-8">
                        我们将帮助您重新获得账号访问权限<br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        请按照以下步骤操作：
                    </p>
                    
                    <div class="space-y-6">
                        <!-- 步骤1 -->
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-4 mt-1">
                                <i class="iconfont icon-youxiang text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">验证邮箱身份</p>
                                <p class="text-sm text-gray-500">输入您的注册邮箱地址</p>
                            </div>
                        </div>
                        <br>
                        <!-- 步骤2 -->
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-4 mt-1">
                                <i class="iconfont icon-yanzhengma text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">输入验证码</p>
                                <p class="text-sm text-gray-500">输入发送到邮箱的验证码</p>
                            </div>
                        </div>
                        <br>
                        <!-- 步骤3 -->
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-4 mt-1">
                                <i class="iconfont icon-yuechi text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800">设置新密码</p>
                                <p class="text-sm text-gray-500">设置您的新密码</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧表单部分 -->
                <div class="w-full md:w-1/2 p-10">
                    <h1 class="text-2xl font-bold text-gray-800 mb-2">修改密码</h1>
                    <p class="text-gray-500 mb-8">请填写以下信息以修改您的密码</p>
                    
                    <form @submit.prevent="handleSubmit" class="space-y-4">
                        <!-- 邮箱地址 -->
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">邮箱地址</label>
                            <div class="relative">
                                <input v-model="formData.email" type="email"
                                    class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请输入邮箱地址">
                            </div>
                        </div>

                        <!-- 验证码 -->
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                            <div class="flex gap-2">
                                <input v-model="formData.verificationCode" type="text"
                                    class="flex-1 pl-4 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请输入验证码">
                                <button type="button" @click="sendVerificationCode" :disabled="isCountdown"
                                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:bg-gray-300">
                                    {{ isCountdown ? `${countdown}秒后重试` : '获取验证码' }}
                                </button>
                            </div>
                        </div>

                        <!-- 新密码 -->
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                            <div class="relative">
                                <input v-model="formData.password" :type="passwordVisible ? 'text' : 'password'"
                                    class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请输入6-16位数字或字符">
                                <button type="button" @click="togglePasswordVisibility" class="absolute right-3 top-2 text-gray-400 hover:text-gray-600">
                                    <i class="iconfont icon-BasicIcons-all-"></i>
                                </button>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">密码须包含字母和数字，长度在6-16位之间</p>
                        </div>

                        <!-- 确认新密码 -->
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                            <div class="relative">
                                <input v-model="formData.confirmPassword" :type="confirmPasswordVisible ? 'text' : 'password'"
                                    class="w-full pl-4 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="请再次输入密码" @blur="validatePasswords">
                                <button type="button" @click="toggleConfirmPasswordVisibility" class="absolute right-3 top-2 text-gray-400 hover:text-gray-600">
                                    <i class="iconfont icon-BasicIcons-all-"></i>
                                </button>
                            </div>
                            <p v-if="errors.confirmPassword" class="text-red-500 text-xs mt-1">{{ errors.confirmPassword }}</p>
                        </div>

                        <!-- 提交按钮 -->
                        <button type="submit" class="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 mt-6">
                            确认修改
                        </button>
                        <button type="submit" class="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 mt-6 ">
                            <P @click.prevent="goToLogin"> ← 返回登录</P>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { getCode, resetPassword } from "../api/forgotPassword.js";
import { ElMessage } from 'element-plus'

const router = useRouter();

const formData = ref({
    email: '',
    verificationCode: '',
    password: '',
    confirmPassword: ''
});

const errors = ref({
    confirmPassword: ''
});

function validatePasswords() {
    if (formData.value.password !== formData.value.confirmPassword) {
        errors.value.confirmPassword = '两次输入的密码不一致';
    } else {
        errors.value.confirmPassword = '';
    }
}

const isCountdown = ref(false);
const countdown = ref(60);

const passwordVisible = ref(false);
function togglePasswordVisibility() {
    passwordVisible.value = !passwordVisible.value;
}

const confirmPasswordVisible = ref(false);
function toggleConfirmPasswordVisibility() {
    confirmPasswordVisible.value = !confirmPasswordVisible.value;
}

const sendVerificationCode = () => {
    const email = formData.value.email;
    if (!email) {
        ElMessage.warning('请输入邮箱地址');
        return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        ElMessage.warning('请输入有效的邮箱地址');
        return;
    }
    isCountdown.value = true;
    getCode(email).then(function(response) {
        ElMessage.success(response);
    });
    const interval = setInterval(() => {
        if (countdown.value <= 0) {
            clearInterval(interval);
            isCountdown.value = false;
            countdown.value = 60;
        } else {
            countdown.value--;
        }
    }, 1000);
};

async function ResetPassword(data) {
    await resetPassword(data).then(function(response) {
        if (response === "修改成功") {
            router.push("/login");
        } else {
            ElMessage.warning('修改失败');
        }
    });
}

const handleSubmit = () => {
    const { email, verificationCode, password, confirmPassword } = formData.value;
    if (!email || !verificationCode || !password || !confirmPassword) {
        ElMessage.warning('请填写所有必填项');
        return;
    }
    if (password !== confirmPassword) {
        ElMessage.warning('两次输入的密码不一致');
        return;
    }
    if (!/[a-zA-Z]/.test(password) || !/[0-9]/.test(password) || password.length < 6 || password.length > 16) {
        ElMessage.warning('密码必须包含字母和数字，长度在6-16位之间');
        return;
    }
    const confirmData = {
        email: email,
        code: verificationCode,
        password: password
    };
    ResetPassword(confirmData);
};

const goToLogin = () => {
    router.push('/login');
};
</script>

<style scoped>
.full-screen-container {
    min-height: 100vh;
    background-color: #f8fafc;
}

.form-group {
    margin-bottom: 1rem;
}

.iconfont {
    font-size: 1rem;
}
/* 添加返回登录按钮的箭头图标样式 */
.icon-zuojiantou:before {
    content: "←";
    font-size: 14px;
    
}
</style>